<template>
  <div>
    <el-dialog title="标签维护" :visible.sync="dialogVisible" width="40%" @close="quxiao">
      <div>
        <el-form ref="formvalue" :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属企业" prop="orgNo">
                <el-select
                  v-model="form.orgNo"
                  placeholder="选择用电企业"
                  size="small"
                  clearable
                  filterable
                  style="width: 100%"
                  @change="getlabellist(form)"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.orgNo"
                    :label="item.orgName"
                    :value="item.orgNo"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务类型" prop="businessType">
                <el-select
                  v-model="form.businessType"
                  placeholder="选择业务类型"
                  size="small"
                  clearable
                  filterable
                  style="width: 100%"
                  @change="changetype"
                >
                  <el-option
                    v-for="item in businessTypelist"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标签名称" prop="model">
                <el-select
                  v-model="form.tagId"
                  placeholder="选择标签名称"
                  size="small"
                  clearable
                  filterable
                  style="width: 100%"
                  @change="changename"
                >
                  <el-option
                    v-for="item in labellist"
                    :key="item.tagId"
                    :label="item.labelName"
                    :value="item.tagId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签状态" prop="labelStatus">
                <el-select
                  v-model="form.labelStatus"
                  placeholder="选择标签状态"
                  size="small"
                  style="width: 100%"
                  disabled
                >
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="停用" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标签编号" prop="labelId">
                <el-input
                  disabled
                  v-model="form.labelId"
                  size="small"
                  placeholder="请输入标签编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签描述" prop="labelName">
                <el-input
                  v-model="form.labelName"
                  size="small"
                  disabled
                  type="textarea"
                  placeholder="请输入标签描述"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-divider></el-divider>
        <div class="but">
          <div>
            <el-button type="primary" size="small" @click="tianjia"
              ><i class="el-icon-plus"></i> 添加设备</el-button
            >
          </div>
          <div>
            <el-button type="primary" @click="baocun" size="small"
              >保 存</el-button
            >
            <el-button @click="quxiao" size="small">取 消</el-button>
          </div>
        </div>
        <div>
          <TableColumn
            ref="tabledata"
            :tableData="tableData"
            :tableConfig="tableConfig"
          >
            <el-table-column
              prop="address"
              label="操作"
              align="center"
              width="200"
            >
              <template #default="{ row }">
                <el-button type="text" style="color: red" @click="delTab(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </TableColumn>
        </div>
      </div>
    </el-dialog>
    <AddDevice
      ref="AddDevicerefs"
      :treemodel="treemodel"
      @getdevice="getdevice"
    ></AddDevice>
  </div>
</template>

<script>
import AddDevice from './adddevice'
import { getlabelnameapi, adddevicelabelapi } from '@/api/system/deviceLabel'
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceAddlabel',
  props: {
    options: {
      type: Array
    }
  },
  components: {
    AddDevice,
    TableColumn
  },
  data() {
    return {
      form: { businessType: '', orgNo: '' },
      treemodel: '',
      labellist: [],
      tableData: [],
      business: '',
      dialogVisible: false,
      businessTypelist: [
        { name: '配电管理', value: '01' },
        { name: '能耗管理', value: '02' },
        { name: '光伏管理', value: '03' },
        { name: '微电网管理', value: '04' },
        { name: '计费管理', value: '05' }
      ],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '80' },
        { label: '设备ID', prop: 'id' },
        { label: '设备名称', prop: 'name' }
      ]
    }
  },

  mounted() {},

  methods: {
    // 保存
    async baocun() {
      const deviceList = this.tableData.map((ele) => {
        return {
          deviceId: ele.id,
          deviceName: ele.name,
          className:ele.className
        }
      })
      await adddevicelabelapi({ ...this.form, deviceList }).then((res) => {
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.code == 200 ? '新增成功' : res.message
        })
        if (res.code == 200) this.quxiao()
        if (res.code == 200) this.$emit('togetlist')
      })
    },
    // 获取标签名称列表
    async getlabellist(item) {
      if (item.businessType && item.orgNo) {
        const {
          data: { list }
        } = await getlabelnameapi({
          businessType: item.businessType,
          orgNo: item.orgNo,
          labelStatus: '',
          deviceId: ''
        })
        this.labellist = list
      }
    },
    // 拿表格数据
    getdevice(arr) {
      this.tableData = arr
    },
    // 删除列表数据
    delTab(row) {
      this.tableData = this.tableData.filter((ele) => ele.id !== row.id)
    },
    // 业务类型下拉
    changetype(val) {
      this.business = val
      this.getlabellist(this.form)
    },
    // 添加设备
    tianjia() {
      const val = this.business
      if (!this.form.businessType)
        return this.$message.warning('请先选择业务类型')
      this.$refs.AddDevicerefs.dialogVisible = true
      this.treemodel =
        val == '01'
          ? 'DeviceManageTree'
          : val == '02'
          ? 'ENERGY_SET_TREE'
          : val == '03'
          ? 'PhotovoltaicDeviceManageTree'
          : val == '04'
          ? 'MicrogridTree'
          : 'MbmDeviceManageTree'
    },
    // 标签名称下拉
    changename(val) {
      const obj = this.labellist.find((ele) => ele.tagId == val)
      this.$set(this.form, 'labelStatus', obj.labelStatus == '启用' ? '1' : '0')
      this.$set(this.form, 'labelName', obj.labelName)
      this.$set(this.form, 'labelId', obj.labelId)
    },
    quxiao() {
      this.$refs.formvalue.resetFields()
      this.labellist = this.tableData = []
      this.dialogVisible = false
    }
  },
  watch:{
    dialogVisible(val) {
      if (!val) {
        this.quxiao()
      } else {
        this.$set(this.form,'orgNo',this.options[0]?.orgNo)
      }
    }
  }
}
</script>
<style>
.but {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
